<template>
    <HeadTail></HeadTail>
    <div class=" mx-auto w-4/5 flex 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base">
        <div
            class=" wewh  w-1/12   ml-0  mr-0 mt-28  text-center  justify-center  2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base;">
            <div class="wew">首页</div>
            <div class="wew ">分类</div>
            <div class="wew ">收藏</div>
            <div class="wew  ">订单</div>
        </div>
        <div
            class="  pt-0 ml-0 mt-16  w-11/12   text-center  2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base  ">
            <div class=" texio h-16 w-full flex   2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base ">
                <span class="wewe my-auto">主食</span>
                <span class="wewe my-auto ">小吃</span>
                <span class="wewe my-auto ">甜品</span>
                <span class="wewe my-auto">饮品</span>
            </div>
            <div class="w-full h-2/5  bg-slate-300 mt-7 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base ">
                <div style="float: right; " class=" flex mt-6">
                    评价：
                    <div class="rating">
                        <input type="radio" id="star5" name="rating" value="5" hidden/>
                        <label for="star5"></label>
                        <input type="radio" id="star4" name="rating" value="4" hidden/>
                        <label for="star4"></label>
                        <input type="radio" id="star3" name="rating" value="3" hidden/>
                        <label for="star3"></label>
                        <input type="radio" id="star2" name="rating" value="2" hidden/>
                        <label for="star2"></label>
                        <input type="radio" id="star1" name="rating" value="1" hidden/>
                        <label for="star1"></label>
                    </div></div>
                <div class=" mt-2 w-3/6 flex 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base  ">
                    <div style="width: 290px; height: 172px; background: #FDC353;" class="mt-13 ml-10"></div>
                    <div class="ml-4 text-left 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base ">
                        <p class="mt-13">商家名称：淄博烧烤</p>
                        <p class=" mt-7 mb-8">地址：山东省淄博市</p>
                        <p>预约号码：1234567893</p>
                    </div>

                </div>
                <div style="float: right;">月销售：123</div>
            </div>
            <div class="mt-12 w-11/12 flex  mx-auto 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base">
                <div class="w-2/3 borede bg-orange-300 mr-32 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base">
                    <div class=" flex bg-teal-300 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base">
                        <div class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base" style="float:left; ">
                            <img class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base" src="@/assets/home/23.png" alt="">
                        </div>
                        <div class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base" style="float: right; text-align: left;">
                            <p class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base" style="margin-top: 12px;">商家名称：中式西餐厅</p>
                            <p class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base" style="margin-top: 77px;">商品名称：铁板牛排</p>
                        </div>

                    </div>
                    <div class="text-left w-4/5 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base">介绍：铁板蓄热时间长，上菜后伴随着烟雾声中发出来的嗞啦嗞啦的响声，菜品热气腾腾、香气四溢、颇具特色</div>
                </div>
                <div class="w-2/3 borede bg-teal-100 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base">

                    <div class=" flex bg-teal-300">
                        <div class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base " style="float:left;">
                            <img class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base" src="@/assets/home/23.png" alt="">
                        </div>
                        <div class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base" style="float: right; text-align: left;">
                            <p class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base" style="margin-top: 12px;">商家名称：手工拉面馆</p>
                            <p class="2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base" style="margin-top: 77px;">商品名称：豚骨拉面</p>
                        </div>
                    </div>
                    <div class="text-left w-4/5 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base">介绍：制作原料主要有豚骨高汤、肉片、细拉面、罐头玉米粒等，口味鲜美，营养丰富。
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
      .rating {
        font-size: 0;
        display: table;
    }

    .rating > label {
        color: #000000;
        float: right;
    }

    .rating > label:before {
        padding: 5px;
        font-size: 24px;
        line-height: 1em;
        display: inline-block;
        content: "★";
    }

    .rating > input:checked ~ label,
    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
        color: #FFD700;
    }

    .rating > input:checked ~ label:hover,
    .rating > label:hover ~ input:checked ~ label,
    .rating > input:checked ~ label:hover ~ label {
        opacity: 0.5;
    }
    * {
        margin: 0, 0;
    }
    .borede{
        border: 1px solid black;
        border-radius: 5px;
    }
    .texio {
        background-color: #FDC353;
    }

    .wel {
        width: calc(100%2);
    }

    .wew {
        height: calc(100%/4);
    }

    .wewh {
        height: 489px;
    }

    .wewe {
        width: calc(100%/4);
    
    }
</style>
<script>
     import HeadTail from "@/components/Nhome/HeadTail.vue"
    export default {
        components: {
            HeadTail,
        },
    }
</script>